import React, { useEffect, useState } from "react";
import axios from 'axios';
import { Link, useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";

export default function HeroDetail() {
  //声明一个状态
  let [hero, setHero] = useState({});

  //获取页面 URL 中的 id 值     针对 params 参数的处理方式
  let {id} = useParams();// 该函数帮助我们快速获取 params 参数

  //获取页面 URL 中的 id 值     针对 query 参数的处理方式
  // let [search] = useSearchParams();
  // let id = search.get('id');

  //获取页面 URL 中的 id 值     针对 state 参数的处理方式
  // let id = useLocation().state.id;
  // let {state: {id}} = useLocation(); //解构赋值形式的写法
  
  //原生方式获取 state 参数
  // console.log(window.history.state.usr.id);

  //原生方式获取 query 参数
  // console.log(window.location);
  // let url = new URL(window.location.href);
  // let id = url.searchParams.get('id');

  //原生方式获取 params 参数
  // let id = new URL(window.location.href).pathname.split('/').pop();
  // console.log(id);


  //组件挂载完毕的操作
  useEffect(() => {
    async function getData(){
      let result = await axios.get(`http://api.xiaohigh.com/heros/${id}`);
      //更新英雄的数据状态
      setHero(result.data);
    }
    getData();
  }, [id]);

  //获得 navigate 函数
  let navigate = useNavigate();

  return (
    <div className="container" style={{padding: '20px'}}>
      {/* 左侧结构 */}
      <div className="col-xs-3" style={{background: '#eee'}}>
        <button className="btn btn-danger" onClick={() => {
          //返回上一个页面  页面的后退  history.go(-1);
          navigate(-1);
        }}>返回</button>
        <Link to="/hero/57">后羿</Link>
        <h3>{hero.name}</h3>
        <p>{hero.type}</p>
        {/* row 专门用来对冲子元素的内边距的  margin: 0 -15px */}
        <div className="row">
          {
            hero.skills && hero.skills.map((item, index) => {
              return <div key={index} className="col-xs-3">
                      <img
                        width="100%"
                        src={`http://cdn.xiaohigh.com${item.img}`}
                        alt=""
                      />
                      <p className="text-center">{item.name}</p>
                    </div>
            })
          }
          
        </div>
      </div>

      {/* 右侧结构 */}
      <div className="col-xs-9">
        {/* 大图 */}
        <img
          className="img-responsive"
          src={hero.big_image && `http://cdn.xiaohigh.com${hero.big_image}`}
          alt=""
        />
        <hr />
        <p dangerouslySetInnerHTML={{__html: hero.intro}}>
        </p>
        {/* <p>{hero.intro}</p> */}
      </div>
    </div>
  );
}
